<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>DataTables | Gentelella</title>

  <!-- Bootstrap -->
  <link href="/graduation-manager/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="/graduation-manager/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="/graduation-manager/vendors/nprogress/nprogress.css" rel="stylesheet">
  <!-- iCheck -->
  <link href="/graduation-manager/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
  <!-- Datatables -->
  <link href="/graduation-manager/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/toastr/toastr.min.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="/graduation-manager/build/css/custom.min.css" rel="stylesheet">
</head>

<br>
<div id="roleTable">
  <div class="x_panel">
    <div class="x_title">
      <h2>Plus Table Design</small></h2>
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="" data-target="#userModel" data-toggle="tooltip" data-placement="left" title="添加"><i
            class="fa fa-plus"></i></a>
        <li><a class="" onClick="_doBatchDel(datatable_role,'/graduation-manager/user/batchDelete.do', 'selectIds')"
               data-toggle="tooltip" data-placement="left" title="批量删除"><i class="fa fa-trash"></i></a>
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li class="dropdown" style="display: none">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
              class="fa fa-wrench"></i></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Settings 1</a>
            </li>
            <li><a href="#">Settings 2</a>
            </li>
          </ul>
        </li>
        <li><a class="close-link" data-toggle="tooltip" data-placement="left" title="关闭"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="x_content">
      <p class="text-muted font-13 m-b-30">
        DataTables has most features enabled by default, so all you need to do to use it with your own tables
        is to call the construction function: <code>$().DataTable();</code>
      </p>
      <table id="datatable_role" class="table table-striped table-bordered bulk_action">

      </table>
    </div>
  </div>

  <div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-labelledby="detailLabel"
       data-backdrop="false" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h5 class="modal-title" id="detailLabel">
            用户信息
          </h5>
        </div>
        <!-- 编辑form -->
        <form id="form" role="form" method="post" action="">
          <div class="modal-body">
            <div class="form-body">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>编号</label>
                    <input type="text" class="form-control" name="userNo">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>登录帐号</label>
                    <input type="text" class="form-control" name="loginName" placeholder="loginName/phone/email">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>密码(默认000000)</label>
                    <input type="text" class="form-control" name="password" data-dftVal="000000">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>姓名</label>
                    <input type="text" class="form-control" name="username">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>角色</label>
                    <select class="form-control" name="roleId" required>
                      <option value="">请选择</option>
                      <option value="1">超级管理员</option>
                      <option value="2">管理员</option>
                      <option value="3">教师</option>
                      <option value="4">学生</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>电话</label>
                    <input type="text" class="form-control" name="mobile">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>性别</label>
                    <input type="text" class="form-control" name="gender">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>专业</label>
                    <input type="text" class="form-control" name="department">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="form-group form-md-line-input">
                    <label>班级</label>
                    <input type="text" class="form-control" name="klass">
                  </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                  <label>电子邮件</label>
                  <input type="text" class="form-control has-feedback-left" name="email" placeholder="">
                  <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                </div>
                <!--<div class="col-sm-6 col-md-3">-->
                <!--<div class="form-group form-md-line-input">-->
                <!--<label>性别</label>-->
                <!--<select class="form-control" name="ctiControlFlag" data-dftVal="1" required>-->
                <!--<option value="">请选择</option>-->
                <!--<option value="0">不发送</option>-->
                <!--<option value="1">发送</option>-->
                <!--</select>-->
                <!--</div>-->
                <!--</div>-->

              </div>
              <!-- ./row -->
            </div>
            <!-- /.编辑form -->
          </div>
          <!-- ./modal-body -->
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" name="save" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>
<!-- jQuery -->
<!--<script src="/graduation-manager/vendors/jquery/dist/jquery.min.js"></script>
&lt;!&ndash; Bootstrap &ndash;&gt;
<script src="/graduation-manager/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
&lt;!&ndash; FastClick &ndash;&gt;
<script src="/graduation-manager/vendors/fastclick/lib/fastclick.js"></script>
&lt;!&ndash; NProgress &ndash;&gt;
<script src="/graduation-manager/vendors/nprogress/nprogress.js"></script>
&lt;!&ndash; iCheck &ndash;&gt;
<script src="/graduation-manager/vendors/iCheck/icheck.min.js"></script>
&lt;!&ndash; Datatables &ndash;&gt;
<script src="/graduation-manager/vendors/datatables.net/js/jquery.dataTables.js"></script>
<script src="/graduation-manager/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/graduation-manager/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/graduation-manager/vendors/jszip/dist/jszip.min.js"></script>
<script src="/graduation-manager/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/graduation-manager/vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="/graduation-manager/vendors/toastr/toastr.min.js"></script>
<script src="/graduation-manager/vendors/jquery-confirm/js/jquery-confirm.js"></script>-->
<!-- Custom Theme Scripts -->
<!--<script src="/graduation-manager/build/js/custom.js"></script>-->
<!--<script src="/graduation-manager/build/js/common.js"></script>-->
<script type="text/javascript">
  $(function () {
    //列表table初始化
    drawTable();
    // 模块上的 按钮
    $('.collapse-link').on('click', function () {
      var $BOX_PANEL = $(this).closest('.x_panel'),
          $ICON = $(this).find('i'),
          $BOX_CONTENT = $BOX_PANEL.find('.x_content');

      // fix for some div with hardcoded fix class
      if ($BOX_PANEL.attr('style')) {
        $BOX_CONTENT.slideToggle(200, function () {
          $BOX_PANEL.removeAttr('style');
        });
      } else {
        $BOX_CONTENT.slideToggle(200);
        $BOX_PANEL.css('height', 'auto');
      }

      $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $('.close-link').click(function () {
      var $BOX_PANEL = $(this).closest('.x_panel');

      $BOX_PANEL.remove();
    });

    $('button[name="save"]').click(function () {
      $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType: 'json',
        timeout: 60000,
        success: function (resData, status, xhr) {
          if (resData.code == 200) {
            toastr.success(resData.msg);
            $("#datatable_role").DataTable().destroy();
            drawTable();
            $('#userModel').modal('hide');
          } else {
            toastr.error(resData.msg);
          }
        },
        error: function (xhr, errorType, error) {
          console(xhr, errorType, error);
          toastr.error("服务器异常");
        }
      })
    });

    //新增时，初始化默认值
    $('a[data-target="#userModel"]').on('click', function () {
      _initDftModal($('#userModel'));
      $(form).attr('action', '../userInfo/saveInfo.do');
      $('.modal-footer', $("#userModel")).show();
      $('#userModel').modal('show');
    });
    //编辑按钮
    $('table').on('click', 'tbody>tr>td>a', function () {
      var that = $(this),
          fn = that.data('fn'),
          objectId = that.data('objectid'),
          act = that.data('act'),
          modalId = that.data('modal'),
          tableId = that.data('table'),
          object = that.data('object');
      //
      //console.info(fn, oid, act, modalId, tableId);
      var modal = $('#' + modalId);
      var action = act + '?' + object + 'Id=' + objectId;
      switch (fn) {
        case 'select':
          _doRead(modal, action, true);
          break;
        case 'edit':
          $(form).attr('action', '../userInfo/update.do');
          _doRead(modal, action, false);
          break;
        case 'del':
          var table = $('#' + tableId);
          _doDel(table, action);
          break;
      }
    });

  });
  function drawTable() {
    $("#datatable_role").dataTable({
      "autoWidth": true,//是否自适应宽度
      ajax: /*{
       url: '/gratuation-manager/user/login.do',
       data: {
       loginName: "admin",
       password: "admin"
       },
       type: 'POST',
       //dataSrc: 'data',
       },*/
          function (data, callback, settings) {
            //封装请求参数
            var param = {};
            param.start = data.start;//开始的记录序号
            param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.page = (data.start / data.length) + 1;//当前页码
            $.ajax({
              type: 'POST',
              url: '/graduation-manager/userInfo/selectInfo.do',
              dataType: 'json',
              timeout: 60000,
//          cache: false, //禁用缓存
              success: function (resData, status, xhr) {
                //console.info(resData, status, xhr);
                if (resData.code == 200) {
                  var returnData = {};
                  returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                  returnData.recordsTotal = 1;//resData.data.total;
                  returnData.recordsFiltered = 1;// resData.data.total;
                  returnData.data = resData.data;
                  callback(returnData);
                }
              },
              error: function (xhr, errorType, error) {
                toastr.error("服务器异常");
              }
            });
          },
      //列表表头字段
      columns: [
        {
          data: null,
          title: '<input type="checkbox" onClick="_doCheckAll(datatable_role,\'selectIds\', this);" />',
          render: function (data, type, row, meta) {
            return '<input type="checkbox" name="selectIds" value="' + row.userId + '" />';
          }
        },
        {
          data: "userNo",
          title: "编号"
        },
        {
          data: "username",
          title: "姓名"
        },
        {
          data: "klass",
          title: "班级"
        },
        {
          data: "mobile",
          title: "手机号"
        },
        {
          data: "email",
          title: "电子邮件"
        },
        {
          data: "roleName",
          title: "角色",
          render: function (data) {
            var role = "";
            $.each(data, function (i, name) {
              role += name;
            });
            return role;
          }
        },
//        {
//          data: "state",
//          title: "是否启用",
//          render: function (data, type, row, meta) {
//            switch (data) {
//              case "0" :
//                return "失效";
//                break;
//              case "1" :
//                return "启用";
//                break;
//              default:
//                return "";
//                break;
//            }
//          }
//        },
        {
          data: null,
          title: "操作",
          render: function (data, type, row, meta) {
            var html = '',
                objectId = row.userId;
            html += '<a class="btn btn-link btn-xs" data-object="user" data-fn="select" data-act="/graduation-manager/userInfo/selectInfo.do" data-objectId="' + objectId + '" data-modal="userModel" data-toggle="tooltip" data-placement="left" title="详情"><i class="fa fa-file-text-o" aria-hidden="true"></i></a>';
            html += '<a class="btn btn-link btn-xs" data-object="user" data-fn="edit" data-act="/graduation-manager/userInfo/selectInfo.do" data-objectId="' + objectId + '" data-modal="userModel" data-toggle="tooltip" data-placement="left" title="编辑"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>';
            html += '<a class="btn btn-link btn-xs" data-object="user" data-fn="del" data-act="/graduation-manager/user/delete.do" data-objectId="' + objectId + '" data-table="datatable_role" data-toggle="tooltip" data-placement="left" title="删除"><i class="fa fa-trash" aria-hidden="true"></i></a>';
            return html;
          }
        }
      ]
    });
  }

</script>
</body>
</html>